<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>KISSY - 全终端适配的 JS 类库</title>
  <meta name="viewport" content="width=device-width">
  <link href="http://fonts.googleapis.com/css?family=Droid+Sans|Lekton|Ubuntu+Mono:400,700" rel="stylesheet">
	<link rel="stylesheet" href="templates/assets/bootstrap.css">
	<link href="templates/assets/normalize.css" rel="stylesheet">
	<link href="templates/assets/kissy.css" rel="stylesheet">
	<link href="templates/assets/prettify.css" rel="stylesheet">
	<link href="templates/assets/forkit.css" rel="stylesheet">
	<script src="templates/assets/jquery.min.js"></script>
	<script src="templates/assets/script.js" type="text/javascript"></script>
	<script src="http://g.tbcdn.cn/trip/kissy/1.4.0/seed-min.js"></script>
	<script src="api/assets/highlight.pack.js"></script>
	<link href="api/assets/tomorrow-night-bright.css" rel=stylesheet />
	<link rel="shortcut icon" href="http://a.tbcdn.cn/s/kissy/favicon.ico">
</head>

<body class="">
    <nav id="sidebar">
    <header>
		<a href="index.html">
			<!--img src="http://gtms04.alicdn.com/tps/i4/T1ceiPFbpcXXcljp_h-200-89.png"-->
			<!--img src="templates/assets/img/logo_6.png"-->
			<!--img src="http://gtms04.alicdn.com/tps/i4/T14oa2FcNcXXaOySEh-180-104.png" alt="" /-->
			<!--img src="http://gtms01.alicdn.com/tps/i1/T1Amq1FaXgXXbXVSUh-180-127.png" alt="" /-->
			<img src="http://gtms02.alicdn.com/tps/i2/T1N0jTXXXjXXay7Rri-175-78.png" alt="" />
		</a>
	</header>
    <ul>
      <li class="nav-divider"><a href="index.html"><img src="templates/assets/img/icon-home.png">首页</a></li>
      <li class="nav-divider"><a href="why-kissy.html"><img src="templates/assets/img/icon-why.png">Why KISSY?</a></li>
      <li><a href="get-started.html"><img src="templates/assets/img/icon-getting-started.png">KISSY 1.4.x 教程大纲</a></li>
      <li class="nav-sub"><a href="module-map.html">核心模块列表</a></li>
      <li class="nav-sub"><a href="kmd.html">KISSY 模块规范 (KMD)</a></li>
      <li class="nav-sub"><a href="gbs.html">浏览器兼容基准(GBS)</a></li>
      <li class="nav-sub"><a href="http://cyj.me/jquery-kissy-rosetta/">jQuery KISSY 对比手册</a></li>
      <li class="nav-sub"><a href="http://gallery.kissyui.com/guide">KISSY 组件开发规范</a></li>
      <li class="nav-sub nav-divider"><a href="history.html">历史版本</a></li>
      <li><a href="">API Doc</a></li>
      <li><a href="http://demo.kissyui.com">Demos</a></li>
      <li class="nav-divider"><a href="http://gallery.kissyui.com">KISSY Gallery</a></li>
      <li><a href="tools.html">KISSY 项目构建工具</a></li>
      <li class="nav-sub"><a href="kmc.html">KS Module Compiler</a></li>
      <li class="nav-sub"><a href="http://abc.f2e.taobao.net">ABC</a></li>
      <li class="nav-sub nav-divider"><a href="clam.html">Clam</a></li>
      <li><a href="third-party-lib.html">第三方代码库</a></li>
      <li class="nav-sub"><a href="https://github.com/lorrylockie/tpap/wiki">面向第三方安全的 KISSY</a></li>
      <li class="nav-sub"><a href="http://www.builive.com/demo/index.php">BUI</a></li>
      <li class="nav-sub nav-divider"><a href="http://work.tmall.net/muidoc/build/">MUI</a></li>
      <li><a href="https://github.com/kissyteam/kissy/blob/master/CONTRIBUTING.md">为 KISSY Core 贡献代码</a></li>
      <li class="nav-sub"><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml">HTML/CSS编码规范</a></li>
      <li class="nav-sub nav-divider"><a href="http://docs.kissyui.com/source/tutorials/style-guide/google/javascriptguide.xml">JavaScript 编码规范</a></li>
	  <li><a href="upgrade.html"><img src="templates/assets/img/icon-documentation.png">1.3.x->1.4.0 升级指南</a></li>
	  <li><a href="faq.html"><img src="templates/assets/img/icon-faqs.png">FAQ</a></li>
      <li><a href="https://github.com/kissyteam/kissy"><img src="templates/assets/img/icon-github.png">GitHub</a></li>
	  <li><a href="core-team.html"><img src="templates/assets/img/icon-google-plus.png">KISSY 核心小组</a></li>
    </ul>
  </nav>

  <div id="content">
    <article>
      

	<h1>calendar</h1>
<p>KISSY 内置日历组件，如无必要，推荐使用<code>gallery/calendar/1.1/</code>日历组件。Gallery <a href="http://gallery.kissyui.com/calendar/1.2/guide/index.html">日历组件</a>。</p>
<p>该组件是由拔赤设计实现，交互清爽、功能实用。支持基本的日期选择、时间选择、嵌入/弹出、范围选择、日期格式化输出等常用功能, 能够满足多数的应用场景, 非常方便用户调用。基本用法：</p>
<pre><code>KISSY.use(&#39;calendar&#39;,function(S,Calendar){
    // use Calendar
});    </code></pre>
<p><a href="http://docs.kissyui.com/1.3/source/raw/demo/calendar/demo1.html">查看日历Demo</a>。</p>
<h3>初始化参数说明：</h3>
<pre><code>new Calendar(trigger,config);</code></pre>
<ul>
<li>trigger (String|HTMLDOMNode|Node) – 配置项, 触点/容器id </li>
<li>config (JSON对象) – 配置项，包括<ul>
<li>date：{Date} - 可选, 该日期所在月份, 默认为当天</li>
<li>selected：{Date} - 可选, 当前选中的日期</li>
<li>startDay：{Number} - 可选, 日历显示星期x为起始日期, 取值范围为0到6, 默认为0,从星期日开始,若取值为1, 则从星期一开始, 若取值为7, 则从周日开始</li>
<li>pages：{Number} - 可选, 日历的页数, 默认为1, 包含一页日历</li>
<li>closable：{Boolean} - 可选, 在弹出情况下, 点选日期后是否关闭日历, 默认为false</li>
<li>rangeSelect：{Boolean} - 可选, 是否支持时间段选择，只有开启时候才会触发rangeSelect事件</li>
<li>range：{Object} - 可选, 默认显示的选择范围, 格式为：<code>{start:s,end:n}</code></li>
<li>minDate：{Date} - 可选, 日历可选择的最小日期, 默认不开启</li>
<li>maxDate：{Date} - 可选, 日历可选择的最大, 默认不开启</li>
<li>multiSelect：{Boolean} - 可选, 是否支持多选, 默认不开启，只有开启时候才会触发multiSelect事件</li>
<li>navigator：{Boolean} - 可选, 是否可以通过点击导航输入日期, 默认开启</li>
<li>popup：{Boolean} - 可选, 日历是否为弹出,默认为false, 不开启</li>
<li>showTime：{Boolean} - 可选, 是否显示时间的选择,默认为false, 不开启</li>
<li>triggerType：{Array | String} - 可选, 弹出状态下, 触发弹出日历的事件, 例如：[‘click’,’focus’],也可以直接传入’focus’, 默认为[‘click’]</li>
<li>disabled：{Array} - 可选, 禁止点击的日期数组[new Date(),new Date(2011,11,26)]</li>
<li>align：{Object} - 可选, 日历和trigger对齐方式，默认{points:[‘bl’,’tl’],offset:[0,0]}</li>
<li>notLimited：{Boolean} - 可选, 是否出现不限的按钮，默认为false不开启，开启后点击触发select事件</li>
<li>rangLinkage：{Boolean} - 可选, 是多个日历是否联动,默认为true, 开启</li>
</ul>
</li>
</ul>
<h3>日历实例方法</h3>
<h4>toggle()</h4>
<p>切换日历的状态, 从显示到隐藏和从隐藏到显示</p>
<h4>render (config)</h4>
<p>通过render可以带入如上任意参数并重新渲染日历，参数为JSON对象，和初始化的<code>config</code>参数用法一样，比如</p>
<pre><code>KISSY.use(&#39;calendar&#39;,function(S,Calendar) {
    c = new Calendar(&#39;#J_WithTime&#39;);
    c.render({maxDate:new Date()});
});</code></pre>
<h4>destroy()</h4>
<p>销毁日历</p>
<h4>hide()</h4>
<p>如果日历是弹出形式, 隐藏日历</p>
<h4>show()</h4>
<p>显示日历</p>
<hr>
<h3>日历实例的事件</h3>
<h4>select</h4>
<p>选中一个日期事件,通过e.date来获得选中的日期,如果开启notLimited参数，则e.date=null</p>
<h4>monthChange</h4>
<p>切换月份事件,通过e.date来获取切换到的日期, 通过e.date.getMonth() + 1 来获得切换至的月份，用法：</p>
<pre><code>KISSY.use(&#39;calendar&#39;,function(S,Calendar) {
    //月份切换事件
    new Calendar(&#39;J_AllEvents&#39;).on(&#39;switch&#39;,function(e){
        alert(&#39;切换事件,月份切换到&#39;+(e.date.getMonth()+1));
    });
});</code></pre>
<h4>rangeSelect</h4>
<p>范围选择事件,通过e.start和e.end来获得开始和结束日期，用法：</p>
<pre><code>KISSY.use(&#39;calendar&#39;,function(S,Calendar) {
    //选择范围,并绑定范围回调
    new Calendar(&#39;J_Range&#39;,{
        multi_page:2,
        rangeSelect:true
    }).on(&#39;rangeselect&#39;,function(e){
        alert(e.start+&#39; &#39;+e.end);
    });
});</code></pre>
<h4>multiSelect</h4>
<p>多选触发的事件，通过e.multi来获取选中的日期数组，用法：</p>
<pre><code>KISSY.use(&#39;calendar&#39;,function(S,Calendar) {
    new Calendar(&#39;#J_Popup23&#39;, {
            popup:true,
            triggerType:[&#39;click&#39;],
            pages:2,
            multiSelect:true,
            rangeLinkage:false
    }).on(&#39;multiSelect&#39;, function(e) {
            alert(e.multi);
    });
});</code></pre>
<h4>timeSelect</h4>
<p>确定选中时间事件,通过e.date来获得日期时间</p>
<h2>FAQ</h2>
<h3>1，如何在初始化时设置时分秒？</h3>
<pre><code>var c = new Calendar(&#39;#J_crontab&#39;);
var ca = c.ca[0];
if(ca){
    ca.timmer.set(&#39;h&#39;, &#39;08&#39;);
    ca.timmer.set(&#39;m&#39;, &#39;00&#39;);
    ca.timmer.set(&#39;s&#39;, &#39;00&#39;);
}</code></pre>


<div id="disqus_thread"></div>
<script>
    if((window.location.hostname.indexOf("kissyui.com")!=-1 )&& window.localStorage.getItem("kissy-commment")!="0"){
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'kissy-docs'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
     //var disqus_identifier = '/anim';
     //var disqus_url = window.location;

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    }
</script>



      
  <style>
	.github-btn {
		border: 0 none;
		overflow: hidden;
		margin-top:4px;
	}
	footer {
		border-top:1px solid #e2e2e2;
		padding-top:20px;
		clear:both;
	}
	/* iPhone 及以下 */
	@media only screen and (max-width: 767px) {
		.github-link {
			display:none;
		}
	}
  </style>
  <footer>




	<div class="text-center">
		©2013 - 2033 KISSY UI LIBRARY
		<br /> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe> 
	<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
	</div>
  </footer>
    </article>
  </div>
  <a target="_blank" href="https://github.com/kissyteam/kissy" class="github-link"><img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0; right: 0; border: 0; z-index: 50"></a>
  <script>
	var S = KISSY;
	(function(){
		S.use('node',function(S){
			S.all('code').each(function(node){
				var className = node.attr('class');
				if(/^lang-/.test(className)){
					var tc = className.replace(/^lang-/,'');
					node.replaceClass(className,tc);
				}
			});
			hljs.tabReplace = '    ';
			hljs.initHighlighting();
		});
	})();
	(function(){
		var h3s = document.getElementsByTagName('h3');
		for(var i = 0;i<h3s.length;i++){
			var str = S.trim(h3s[i].innerHTML);
			try{
				str = str.match(/\w+/)[0];
			}catch(e){
				continue;
			}
			h3s[i].innerHTML = '<a name="'+str+'"></a>' + h3s[i].innerHTML;
		}
	})();
  </script>
</body>
</html>
